<template>
    <div>
        <div class="flex items-center">
            当前位置：
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/competition' }">
                    比赛信息
                </el-breadcrumb-item>
<!--                <el-breadcrumb-item-->
<!--                    :to="{-->
<!--                        path: `/information/default`,-->
<!--                        query: {-->
<!--                            cid: newsDetail.cid,-->
<!--                            name: newsDetail.cate_name-->
<!--                        }-->
<!--                    }"-->
<!--                >-->
<!--                    {{ newsDetail.cate_name }}-->
<!--                </el-breadcrumb-item>-->
                <el-breadcrumb-item>{{newsDetail.name}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="flex gap-4 mt-5">
            <div class="w-[1200px] bg-body rounded-[8px] flex-none p-5">
                <div class="border-b border-br pb-4">
                  <div>
                    <span class="font-medium text-[22px]">
                        {{ newsDetail.name }}
                    </span>
                    <span style="float:right;">
                      <ElButton :disabled="!userStore.userInfo?.memberCode" size="large" round @click="handleApply" style="background: #00bebd;color: #fff;border: 1px solid #00bebd;">
                        立即报名
                    </ElButton>
                    </span>
                  </div>
                    <div
                        class="mt-3 text-tx-secondary flex items-center flex-wrap"
                    >
                        <div class="flex items-center" v-if="newsDetail.createName">
                          <Icon name="el-icon-Avatar" />
                          <span>{{ newsDetail.createName }} &nbsp;|&nbsp;</span>
                        </div>
                        <div class="mr-4 flex items-center">
                          <Icon name="el-icon-List" />
                          <el-tag type="success" v-if="newsDetail.playType.includes('0')||(newsDetail.playType.includes('1')&&newsDetail.playType.includes('2')&&newsDetail.playType.includes('3')&&newsDetail.playType.includes('4')&&newsDetail.playType.includes('5'))">全类型</el-tag>
                          <el-tag type="primary" v-if="newsDetail.playType.includes('1')">男单打</el-tag>&nbsp;
                          <el-tag type="warning" v-if="newsDetail.playType.includes('2')">女单打</el-tag>&nbsp;
                          <el-tag type="success" v-if="newsDetail.playType.includes('3')">男双打</el-tag>&nbsp;
                          <el-tag type="error" v-if="newsDetail.playType.includes('4')">女双打</el-tag>&nbsp;
                          <el-tag type="danger" v-if="newsDetail.playType.includes('5')">男女混打</el-tag>
                        </div>
                        <div class="mr-4 flex items-center">
                          <Icon name="el-icon-Avatar" />
                          <span>{{ newsDetail.registrationTime }} ~ {{newsDetail.registrationEndTime}}</span>
                        </div>
                        <div class="flex items-center">
                            <Icon name="el-icon-View" />
                            <span>&nbsp;{{ newsDetail.viewNum }}人浏览</span>
                        </div>
                    </div>
                </div>
                <div
                    v-if="newsDetail.description"
                    class="bg-page mt-4 p-3 rounded-lg"
                >
                    摘要：{{ newsDetail.description }}
                </div>
                <div class="py-4 post-content" v-html="newsDetail.content"></div>
<!--                <div class="flex justify-center mt-[40px]">-->
<!--                    <ElButton size="large" round @click="handelCollectLock">-->
<!--                        <Icon-->
<!--                            :name="`el-icon-${-->
<!--                                newsDetail.collect ? 'StarFilled' : 'Star'-->
<!--                            }`"-->
<!--                            :size="newsDetail.collect ? 20 : 16"-->
<!--                            :color="newsDetail.collect ? '#FF2C2F' : 'inherit'"-->
<!--                        />-->
<!--                        {{ newsDetail.collect ? '取消收藏' : '点击收藏' }}-->
<!--                    </ElButton>-->
<!--                </div>-->
            </div>
<!--            <CompetitionCard-->
<!--                class="flex-1"-->
<!--                header="相关资讯"-->
<!--                :data="newsDetail.new"-->
<!--                :only-title="false"-->
<!--                image-size="mini"-->
<!--                :show-author="false"-->
<!--                :show-desc="false"-->
<!--                :show-click="false"-->
<!--                :border="false"-->
<!--                :title-line="2"-->
<!--                source="new"-->
<!--            />-->
        </div>
        <apply-popup v-if="showEdit" :competitionId="newsDetail.id" ref="applyRef" :data="applyShow" @close="showEdit = false" />
    </div>
</template>
<script lang="ts" setup>
import {ElBreadcrumb, ElBreadcrumbItem, ElButton, ElUpload} from 'element-plus'
import { addCollect, cancelCollect } from '~~/api/news'
import {getCompetitionApplyShow, getCompetitionDetail} from '~~/api/competition'
import feedback from '~~/utils/feedback'
import applyPopup from './apply.vue'
import {useUserStore} from "~/stores/user";
const applyRef = shallowRef<InstanceType<typeof applyPopup>>()
const showEdit = ref(false)
const route = useRoute()
const userStore = useUserStore()
const { data: newsDetail, refresh } = await useAsyncData(
    () =>
        getCompetitionDetail({
            id: route.params.id
        }),
    {
        initialCache: false
    }
)

const applyShow = reactive({
  nanOne: '',
  nanTwo: '',
  nvOne: '',
  nvTwo: '',
  allTwo: '',
  competitionId: ''
})

const getSourceText = computed(() => {
    switch (route.params.source) {
        case 'hot':
            return '热门资讯'
        case 'new':
            return ' 最新资讯'
        default:
            return '全部资讯'
    }
})

const handelCollect = async () => {
    const id = route.params.id
    if (newsDetail.value.collect) {
        await cancelCollect({ id })
        feedback.msgSuccess('已取消收藏')
    } else {
        await addCollect({ id })
        feedback.msgSuccess('收藏成功')
    }
    refresh()
}
const handleApply = async (data: any) => {
  const apply = await getCompetitionApplyShow({id: route.params.id})
  Object.assign(applyShow, apply);
  showEdit.value = true
  await nextTick()
  applyRef.value?.open()
  // editRef.value?.getDetail(data)
}
const { lockFn: handelCollectLock } = useLockFn(handelCollect)
</script>
<style lang="scss">
.post-content p{
    margin-bottom: 16px !important;
    line-height: 1.6;
    font-size: 16px;
    text-indent: 2em;
    text-align: left;
}

</style>
